<template>
  <div class="provide-inject-container">
    <h2>Provide/Inject API</h2>
    <p class="description">Vue 3中的依赖注入模式，实现跨层级组件通信</p>
    
    <div class="demo-section">
      <div class="provider-component">
        <h3>Provider 组件</h3>
        <p>在顶层组件提供数据和方法：</p>
        <div class="controls">
          <input v-model="theme" placeholder="输入主题名称" />
          <button @click="updateTheme">更新主题</button>
          <p>当前主题: <span :style="{ color: themeColor }">{{ theme }}</span></p>
        </div>
      </div>
      
      <div class="injector-container">
        <h3>Injector 组件层级</h3>
        <InjectorLevelOne />
      </div>
    </div>
    
    <div class="code-example">
      <h3>代码示例</h3>
      <CodeBlock 
        :code="codeExample" 
        language="javascript" 
        :showLineNumbers="true" 
        :defaultDarkMode="false"
      />
    </div>
    
    <div class="features-list">
      <h3>主要特点</h3>
      <ul>
        <li>🔄 跨层级组件通信，避免props层层传递</li>
        <li>📦 提供依赖注入模式，更灵活的组件设计</li>
        <li>🛡️ 可以提供响应式数据，自动更新依赖组件</li>
        <li>🔧 支持注入配置项，如默认值和响应式标记</li>
        <li>💡 适合主题、配置等全局状态管理</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, provide } from 'vue'
import InjectorLevelOne from '@components/subcomponents/InjectorLevelOne.vue'
import InjectorLevelTwo from '@components/subcomponents/InjectorLevelTwo.vue'
import InjectorLevelThree from '@components/subcomponents/InjectorLevelThree.vue'
import CodeBlock from '@components/CodeBlock.vue'

// 提供响应式数据
const theme = ref('default')
const themeColor = ref('#3498db')
const counter = ref(0)

// 更新主题颜色
function updateTheme() {
  const colors = ['#3498db', '#e74c3c', '#2ecc71', '#f39c12', '#9b59b6']
  themeColor.value = colors[Math.floor(Math.random() * colors.length)]
}

// 提供数据和方法给子组件
provide('theme', theme)
provide('themeColor', themeColor)
provide('counter', counter)
provide('incrementCounter', () => counter.value++)

// 代码示例
const codeExample = `// Provider组件
export default {
  setup() {
    const theme = ref('default')
    
    // 提供数据给子组件
    provide('theme', theme)
    provide('updateTheme', (newTheme) => {
      theme.value = newTheme
    })
    
    return { theme }
  }
}

// 深层级的Injector组件
export default {
  setup() {
    // 注入来自Provider的数据
    const theme = inject('theme')
    const updateTheme = inject('updateTheme')
    
    // 也可以提供默认值
    const config = inject('config', { defaultConfig: true })
    
    return {
      theme,
      updateTheme,
      config
    }
  }
}`
</script>

<style scoped>
.provide-inject-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Arial', sans-serif;
}

h2 {
  color: #333;
  text-align: center;
  margin-bottom: 10px;
  font-size: 2rem;
}

.description {
  text-align: center;
  color: #666;
  margin-bottom: 30px;
  font-size: 1.1rem;
}

.demo-section {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.provider-component {
  margin-bottom: 20px;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  border-left: 4px solid #3498db;
}

.controls {
  margin-top: 15px;
}

.controls input {
  padding: 8px 12px;
  margin-right: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.controls button {
  padding: 8px 16px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.controls button:hover {
  background-color: #2980b9;
}

.injector-container {
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  border-left: 4px solid #e74c3c;
}

.code-example {
  margin-bottom: 30px;
}

.code-block {
  background-color: #2d3748;
  border-radius: 6px;
  padding: 20px;
  overflow-x: auto;
}

pre {
  margin: 0;
}

code {
  color: #e2e8f0;
  font-family: 'Consolas', 'Monaco', monospace;
}

.features-list {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
}

.features-list ul {
  list-style-type: none;
  padding-left: 0;
}

.features-list li {
  padding: 10px 0;
  padding-left: 20px;
  border-bottom: 1px solid #eee;
  position: relative;
}

.features-list li:last-child {
  border-bottom: none;
}
</style>